<template>
	<div class="useInfo">
		<!-- 使用教程 -->
		<u-sticky bgColor="#fff" class="mt_50">
			<u-tabs :list="lists" @click="click" class="u-tabs" :current="current" :activeStyle="{
          color: '#2979ff',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }" :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" lineWidth="50"></u-tabs>
		</u-sticky>
		<view class="pd_50">
			<rich-text :nodes="content"></rich-text>
			<div class="loading">
				<u-loading-icon :show="loading" text="加载中...请稍后" textSize="20"></u-loading-icon>
			</div>
		</view>
	</div>
</template>

<script>
	import {
		cateLists,
		cateDetail
	} from "@/common/api/index";

	export default {
		name: "useInfo",
		components: {},
		data() {
			return {
				lists: [],
				content: "",
				loading: false,
				current: 0,
			};
		},
		onLoad(options) {
			let indexId = options.value ? JSON.parse(options.value).id : ""
			let formData = {
				cid: options.id,
			};
			cateLists(formData).then((res) => {
				if (res.code === 1) {
					this.lists = res.data.lists;
					this.lists.forEach((item, index) => {
						item.name = item.title;
						if (item.id == indexId) {
							this.current = index
						}
					});
					this.click(this.lists[this.current]);
				} else {
					this.showMsg(res.msg);
				}
			});
		},
		methods: {
			async click(item) {
				this.loading = true;
				let res = await cateDetail({
					id: item.id,
				});
				if (res.code === 1) {
					this.content = res.data.content;
					this.loading = false;
				} else {
					this.showMsg(res.msg);
				}
			},
		},
	};
</script>

<style scoped lang='scss'>
	.u-tabs {
		margin: 0 auto;
	}

	/deep/.u-tabs__wrapper__nav__item__text {
		padding-bottom: 30rpx !important;
	}

	.mt_50 {
		margin-top: 50rpx;
	}

	.pd_50 {
		padding: 50rpx;
	}

	.loading {
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
	}
</style>